<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="../js/vue.js"></script>
		<div id="app">
			<!-- 选一个 -->
			<select v-model="fu">
				<option value ="香蕉">香蕉</option>
				<option value ="苹果">苹果</option>
				<option value ="橘子">橘子</option>
				<option value ="芒果">芒果</option>
			</select>
			<h2>当前水果:{{fu}}</h2>
			
			
			<!-- 选多个 -->
			<select v-model="fus" multiple>
				<option value ="香蕉">香蕉</option>
				<option value ="苹果">苹果</option>
				<option value ="橘子">橘子</option>
				<option value ="芒果">芒果</option>
			</select>
			<h2>当前水果:{{fus}}</h2>
			
			<label :for="item" v-for="item in hobbies">
				<input type="checkbox" :id="item" :value="item" v-model="hobbies1"/>{{item}}
				
			</label>
			{{hobbies1}}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					fu:"香蕉",
					fus:[],
					hobbies1:[],
					hobbies:["1","2","3","4","5"]
				},
				methods: {

				}
			})
		</script>
	</body>
</html>
